<template>
	<view class="bizPage">
		<status-bar title="考勤打卡" />
		<view class="padding20">
			<view class="head bgwhite d-flex a-center m-bot20">
				<image class="avatar m-right20" :src="imgUrls(mainStore.userInfo.avatar)" mode="aspectFill"></image>
				<view class="flex-1">
					<view class="size30 color-333 bold m-bot10">{{ mainStore.userInfo.userName }}</view>
					<view class="size28 color-999">{{ mainStore.userInfo.position }}</view>
				</view>
				<view class="size26 color-999">{{ setFormat('yyyy年mm月dd日') }}</view>
			</view>
			<view class="main bgwhite m-bot20">
				<view class="title flexac color-666">
					<text class="size26 m-right10">上班：{{ pageData.workTime }}</text>
					<image class="icon m-right10" :src="staticImg + 'kq_cg.png'" v-if="work.result == 10 || work.result == 30"></image>
					<text class="size26 m-right10" style="color: #f9ae3d;" v-if="work.result == 21 || work.result == 31">(迟到)</text>
					<text class="size26">- 下班：{{ pageData.offdutyTime }}</text>
					<image class="icon m-left10" :src="staticImg + 'kq_cg.png'" v-if="offWork.result == 10 || offWork.result == 30"></image>
					<text class="size26 m-right10" style="color: #f9ae3d;" v-if="offWork.result == 22 || offWork.result == 32">(早退)</text>
				</view>
				<view class="clock p-re" v-if="pageData.adcable">
					<view class="front wh padding20 p-ab" :class="{'reverse': clocked}" @click="handleClockIn">
						<view class="inside wh flexac f-column white">
							<view class="size38">{{ type == 1 ? '上班打卡' : '下班打卡' }}</view>
							<view class="size54 bold">{{ currentTime }}</view>
							<view class="size24" style="opacity: 0.5;">{{ type == 1 ? `请在${pageData.workTime}前打卡` : `请在${pageData.offdutyTime}后打卡` }}</view>
						</view>
					</view>
					<view class="back wh padding20 p-ab" :class="{'reverse': clocked}">
						<view class="inside wh flexac">
							<view class="size38 white">打卡成功</view>
						</view>
					</view>
				</view>
				<view class="disabled flexac f-column white" v-else>
					<view class="size44 m-bot10">无法打卡</view>
					<view class="size34" style="opacity: 0.5;">{{ currentTime }}</view>
				</view>
				<view class="text-center">
					<image class="img" :src="staticImg + 'kq_dw.png'" mode="aspectFit"></image>
					<view class="size32 color-666 ellipsis_1 m-top20">{{ address }}</view>
				</view>
			</view>
			<!-- 异常仅限hr/大boss/部门负责人查看 -->
			<view class="catch bgwhite d-flex a-center" @click="toUrl('/bizPage/personnel/divisionException')" v-if="mainStore.employeeType != 0">
				<image class="icon m-right20" :src="staticImg + 'kq_cd.png'" mode="aspectFit"></image>
				<view class="flex-1 size28 color-222">本月待处理异常</view>
				<view class="size28 color-222 m-right10">{{ abnNum }}次</view>
				<text class="iconfont icon-a-zujian32 size24 color-999"></text>
			</view>
		</view>
		
		<tab-bar source="clockIn" width="40" />
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue'
	import { onLoad, onUnload } from '@dcloudio/uni-app'
	import { staticImg } from '@/utils/config.js'
	import { useMainStore } from '@/stores/index'
	import { toUrl, Toast, imgUrls, Location } from '@/utils/utils.js'
	import Http from '@/utils/request.js'
	import statusBar from '../components/statusBar.vue'
	import tabBar from '../components/tabBar.vue'
	import QQMapWX from '@/utils/qqmap-wx-jssdk.min.js'
	let qqmapsdk
	
	const mainStore = useMainStore()
	const pageData = ref('')
	const work = ref('') // 上班打卡记录
	const offWork = ref('') // 下班打卡记录
	const address = ref('') // 打卡点地址
	const timer = ref(null)

	const type = computed(() => { // 1上班、2下班
		return new Date().getHours() < 12 ? 1 : 2
	})
	
	onLoad(async () => {
		updateTime() // 初始化时间
		timer.value = setInterval(updateTime, 1000) // 每秒更新时间
		await Location()
		getInfo()
		getLog()
		getAbnNum()
		reverseGeocoder(mainStore.position)
	})

	onUnload(() => {
		if(timer.value) {
			clearInterval(timer.value)
			timer.value = null
		}
	})
	
	// 获取打卡信息
	const getInfo = () => {
		Http.get({
			url: '/hr/adc/getAdcInfo'
		}).then(res => {
			if(res.code != 0) return Toast(res.msg)
			pageData.value = res.data || ''
		})
	}
	
	// 每日打卡记录查询
	const getLog = () => {
		Http.get({
			url: '/hr/adc/getAdcListByDay',
			data: {
				day: setFormat('yyyy-mm-dd')
			}
		}).then(res => {
			let result = res.data || ''
			work.value = result.work || ''
			offWork.value = result.offWork || ''
		})
	}
	
	// 打卡处理
	const clocked = ref(false)
	const handleClockIn = () => {
		if(!pageData.value.adcable) return
		Http.post({
			url: '/hr/adc/adcProcess',
			data: {
				address: address.value
			},
			Typejson: false
		}).then(res => {
			if(res.code != 0) return Toast(res.msg)
			clocked.value = true
			getLog()
		})
	}

	const abnNum = ref('0')
	
	// 当月异常考勤数量
	const getAbnNum = () => {
		Http.get({
			url: '/hr/adc/getCurrMthAbnNums'
		}).then(res => {
			abnNum.value = res.data || '0'
		})
	}

	// 逆地址解析(坐标转地址)
	const reverseGeocoder = ({longitude, latitude}) => {
		qqmapsdk = new QQMapWX({
			key: 'D7ABZ-TA53A-ZORK7-CM45I-4GZWE-EUFLX'
		})
		qqmapsdk.reverseGeocoder({
			location: {
				longitude,
				latitude
			},
			success: res => {
				if(res.status != 0) return Toast(res.message)
				address.value = res.result.address
			}
		})
	}

	const currentTime = ref('') // 当前时间
	const updateTime = () => {
		let now = new Date()
		let hour = now.getHours().toString().padStart(2, '0')
		let minute = now.getMinutes().toString().padStart(2, '0')
		let second = now.getSeconds().toString().padStart(2, '0')
		currentTime.value =  `${hour}:${minute}:${second}`
	}

	const setFormat = (format) => {
		return uni.$u.timeFormat(Number(new Date()), format)
	}
</script>

<style lang="scss" scoped>
	.bizPage {
		min-height: 100vh;
		background: #F6F7FB;
	} 
	.head {
		height: 166rpx;
		border-radius: 20rpx;
		padding: 0 40rpx;
		.avatar {
			width: 66rpx;
			height: 66rpx;
			border-radius: 10rpx;
		}
	}
	.main {
		height: 920rpx;
		border-radius: 20rpx;
		.title {
			height: 100rpx;
			border-bottom: 1rpx solid #F2F2F2;
			.icon {
				width: 28rpx;
				height: 28rpx;
			}
		}
		.clock {
			width: 350rpx;
			height: 350rpx;
			margin: 200rpx auto 80rpx;
			perspective: 1000rpx;
			.front, .back {
				border-radius: 50%;
				backface-visibility: hidden; // 隐藏旋转元素的背面
				transition: transform 1s ease;
			}
			.front {
				background: rgba(12,177,254,0.07);
				transform: rotateY(0deg);
				.inside {
					background: linear-gradient(180deg, #09BBFE, #1885FF);
					box-shadow: 0rpx 3rpx 25rpx 0rpx rgba(33,103,208,0.39);
					border-radius: 50%;
				}
				&.reverse {
					transform: rotateY(180deg);
				}
			}
			.back {
				background: #EFF5FE;
				transform: rotateY(180deg);
				.inside {
					background: #C6CED9;
					border-radius: 50%;
				}
				&.reverse {
					transform: rotateY(0deg);
				}
			}
		}
		.disabled {
			width: 310rpx;
			height: 310rpx;
			background: #B4BCC8;
			border-radius: 50%;
			margin: 220rpx auto 100rpx;
		}
		.img {
			width: 68rpx;
			height: 68rpx;
		}
	}
	.catch {
		height: 100rpx;
		border-radius: 20rpx;
		padding: 0 26rpx;
		.icon {
			width: 26rpx;
			height: 26rpx;
		}
	}
</style>
